<template>
  <view class="modern-premium-container">
    <!-- 顶部导航栏 -->
    <back :showBackText="false" customClass="modern-header" title="资料详情"></back>

    <!-- 主内容区域 -->
    <view class="content-wrapper" v-if="isLoad">
      <scroll-view scroll-y class="modern-scroll">
        <!-- 文章头部信息 -->
        <view class="article-header-card">
          <view class="article-title-wrapper">
            <text class="article-main-title">{{ info.name }}</text>
            <view class="article-meta-info">
              <view class="meta-tag">
                <text class="meta-icon">{{ info.version == 1 ? '📄' : '📂' }}</text>
                <text class="meta-label">{{ info.version == 1 ? '在线文档' : '网盘资料' }}</text>
              </view>
              <view class="meta-tag">
                <text class="meta-icon">🔥</text>
                <text class="meta-label">{{ info.hot }} 人学习</text>
              </view>
              <view class="meta-tag" v-if="info.expire_text">
                <text class="meta-icon">⏰</text>
                <text class="meta-label">{{ info.expire_text }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 付费墙区域 -->
        <view class="premium-purchase-section" v-if="!info.has_material" style="display: none;">
          <view class="section-header">
            <text class="section-title">解锁完整资料</text>
            <text class="section-subtitle">获取独家学习资源，提升您的专业技能</text>
          </view>
          
          <view class="pricing-options">
            <view class="pricing-option-card" @tap="selectPaymentMethod('money')">
              <view class="option-icon">💰</view>
              <view class="option-content">
                <text class="option-title">直接购买</text>
                <text class="option-price">¥ {{ info.real_price }}</text>
              </view>
              <view class="option-badge">
                <text class="badge-text">推荐</text>
              </view>
            </view>
            
            <view class="pricing-option-card" @tap="selectPaymentMethod('points')">
              <view class="option-icon">🎯</view>
              <view class="option-content">
                <text class="option-title">积分兑换</text>
                <text class="option-price">{{ info.price }} 积分</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 资料介绍区域 -->
        <view class="material-details-section">
          <view class="section-header">
            <text class="section-title">资料介绍</text>
          </view>
          
          <view class="details-content">
            <view class="detail-description">
              <rich-text :nodes="info.desc"></rich-text>
            </view>
          </view>
        </view>

        <!-- 资料内容区域 -->
        <view class="material-content-section">
          <view class="section-header">
            <text class="section-title">资料内容</text>
          </view>
          
          <view class="content-wrapper">
            <view class="content-preview">
              <!-- 付费遮罩 -->
              <view class="premium-overlay" v-if="!info.has_material">
                <view class="overlay-inner">
                  <text class="overlay-icon">🔒</text>
                  <text class="overlay-title">完整内容需要付费解锁</text>
                  <text class="overlay-subtitle">立即购买获取完整资料</text>
                </view>
              </view>
              
              <!-- 已购买用户显示完整内容和访问按钮 -->
              <view class="full-content" v-else>                
                <!-- 资料描述 -->
                <view class="material-description">
                  <rich-text :nodes="info.content"></rich-text>
                </view>
                
                <!-- 访问按钮 -->
                <view class="access-buttons">
                  <view class="access-button" @tap="readTap" v-if="info.version == 1">
                    <text class="button-icon">📂</text>
                    <text class="button-text">在线预览</text>
                  </view>
                  <view class="access-button" @tap="accessMaterial" v-else>
                    <text class="button-icon">📄</text>
                    <text class="button-text">复制内容</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </scroll-view>
    </view>

    <!-- 底部操作栏 -->
    <view class="modern-action-bar" v-if="isLoad && !appIsAudit && !info.has_material">
      <view class="action-content">
        <view class="main-action-button" @tap="showPaymentOptions">
          <text class="button-text">立即解锁完整资料</text>
          <text class="button-subtext">¥ {{ info.real_price }} 或 {{ info.price }} 积分</text>
        </view>
      </view>
    </view>

    <!-- 支付方式选择弹窗 -->
    <view class="payment-modal-overlay" :class="showPaymentModal ? 'show' : ''">
      <view class="payment-modal-content">
        <view class="modal-header">
          <text class="modal-title">选择支付方式</text>
          <text class="modal-subtitle">您将获得该资料的完整访问权限</text>
        </view>
        <view class="modal-body">
          <view class="payment-methods">
            <view class="payment-method-card" @tap="confirmPurchase('money')">
              <view class="method-icon">💰</view>
              <view class="method-info">
                <text class="method-title">微信支付</text>
                <text class="method-amount">¥ {{ info.real_price }}</text>
              </view>
            </view>
            
            <view class="payment-method-card" @tap="confirmPurchase('points')">
              <view class="method-icon">🎯</view>
              <view class="method-info">
                <text class="method-title">积分兑换</text>
                <text class="method-amount">{{ info.price }} 积分</text>
              </view>
            </view>
          </view>
        </view>
        <view class="modal-footer">
          <view class="footer-actions">
            <view class="cancel-action" @tap="hidePaymentOptions">
              <text class="cancel-text">取消</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载进度弹窗 -->
    <view class="loading-modal-overlay" :class="showProcessModal ? 'show' : ''">
      <view class="loading-modal-content">
        <view class="loading-header">
          <text class="loading-title">正在准备资料</text>
        </view>
        <view class="loading-body">
          <view class="progress-wrapper">
            <view class="progress-track">
              <view class="progress-fill" :style="[{ width: processRate }]">
                <text class="progress-text">{{ processRate }}</text>
              </view>
            </view>
            <text class="loading-message">请稍候，正在为您准备资料...</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 资料内容弹窗 -->
    <confirm title="资料内容" :content="info.content" :status.sync="showContent"
      confirmtext="已复制内容" confirmtextclass="cuicon-check">
    </confirm>
  </view>
</template>

<style src="./detail.css"></style>
<script src="./detail.js"></script>